<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>动画</title>
		<script src="../js/jquery-3.4.1.min.js"></script>
		<style>
			#adv{
				width: 520px;
				overflow: hidden;
				/* border: 2px solid red; */
			}
		</style>
		<script>
			$(function() {
				$("#hide").click(function() {
					$("#adv").hide(2000, "linear");
				});
				$("#slide").click(function() {
					if ($("#adv").is(":visible"))
						$("#adv").slideUp(2000);
					else
						$("#adv").slideDown(1000);
				});

				$("#fade").click(function() {
					if ($("#adv").is(":visible"))
						$("#adv").fadeOut(2000);
					else
						$("#adv").fadeIn(4000);
				});
				$("#kuan").click(function() {
					$("#adv").animate({
						width: "0"
					}, 2000,function(){
						$(this).hide();
					});
				});
			});
		</script>
	</head>
	<body>
		<div id="adv">
			<img src="../day9/3.jpg" />
		</div>
		<div>
			<button type="button" id="hide">消失</button>
			<button type="button" id="slide">slide</button>

			<button type="button" id="fade">淡入淡出</button>

			<button type="button" id="kuan">改变宽度</button>
		</div>
	</body>
</html>
